<template>
  <div class="expense_add">
    <div class="add_con">
      <div class="add_head">
        <div class="add_title">
          <span>出差审批表</span>
        </div>
        <div class="add_info">
          <div class="title_org">出差部门：{{ checkForm.orgName }}</div>
        </div>
      </div>
      <div class="add_table" ref="add_table">
        <div class="add_tab">
          <div class="table_line line_th">
            <div class="table_tit">姓名</div>
            <div class="table_con">{{ checkForm.userName }}</div>
            <div class="table_tit">职务</div>
            <div class="table_con">{{ checkForm.post }}</div>
          </div>
          <div class="table_line">
            <div class="table_tit">陪同人员</div>
            <div class="table_con con_all con_trans">
              <el-select
                v-model="checkForm.accompanyList"
                filterable
                placeholder="请选择"
                value-key="accompanyId"
                multiple>
                <el-option
                  v-for="item in userAOptions"
                  :key="item.accompanyId"
                  :label="item.accompanyName + '（' + item.accompanyPost + '）'"
                  :value="item"></el-option>
              </el-select>
            </div>
          </div>
          <div class="table_line">
            <div class="table_tit">出差事由</div>
            <div class="table_con con_all">
              <el-input
                type="textarea"
                placeholder="请输入"
                v-model="checkForm.reimburseReason"
                maxlength="50"></el-input>
            </div>
          </div>
          <div class="table_line">
            <div class="table_tit">出差时间</div>
            <div class="table_con con_all">
              <el-date-picker
                v-model="currentTime"
                type="datetimerange"
                unlink-panels
                range-separator="—"
                start-placeholder="选择启程时间"
                end-placeholder="选择返程时间"
                format="yyyy-MM-dd HH:mm"
                :editable="false"></el-date-picker>
            </div>
          </div>
          <div class="table_line">
            <div class="table_tit">出发地</div>
            <div class="table_con">
              <el-input
                class="week_input"
                placeholder="请输入"
                v-model="checkForm.startPlace"
                maxlength="30"
                type="textarea"></el-input>
            </div>
            <div class="table_tit">目的地</div>
            <div class="table_con">
              <el-input
                class="week_input"
                placeholder="请输入"
                v-model="checkForm.leavePlace"
                maxlength="30"
                type="textarea"></el-input>
            </div>
          </div>
          <div class="table_line">
            <div class="table_tit">交通工具</div>
            <div class="table_con con_all con_trans">
              <el-radio-group v-model="checkForm.transportation">
                <el-radio label="1">公共交通-火车/高铁/客车/飞机</el-radio>
                <el-radio label="2">公车</el-radio>
                <el-radio label="3">平台租赁</el-radio>
                <el-radio label="4">其他(请注明)</el-radio>
              </el-radio-group>
              <el-input
                class="week_input"
                placeholder="请注明其他"
                v-model="checkForm.transportationRemark"
                size="mini"
                v-if="checkForm.transportation === '4'"
                maxlength="20"></el-input>
            </div>
          </div>
        </div>
        <div class="add_annex">
          <div class="annex_label">
            <span>*</span>
            附件：
          </div>
          <div class="annex_upload">
            <UploadFile :file-list="checkForm.enclosureList">
              <div class="file_tips" slot="other">
                <div class="tip_li">提示：请上传出差证明材料</div>
              </div>
            </UploadFile>
          </div>
        </div>
      </div>
      <div class="btn_save">
        <el-button class="btnBorder" @click="cancelData">取 消</el-button>
        <el-button class="btnBg" type="primary" @click="saveData('0')" v-if="checkForm.saveStatus !== '1'">
          暂 存
        </el-button>
        <el-button class="btnBg" type="primary" @click="saveData('1')">提 交</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import UploadFile from '@com/UploadFile'
import { addTripReimburse, updateTripReimburse } from '@apis/api-dailyManage.js'
import moment from 'moment'
export default {
  components: {
    UploadFile,
  },
  props: {
    userAllList: {
      type: Array,
      default: () => [],
    },
    formData: {
      type: Object,
      default: () => {},
    },
  },
  watch: {},
  data() {
    return {
      moment: moment,
      applyType: '1',
      timeNow: moment().format('YYYY-MM-DD'),
      model: '',
      reason: '',
      userName: JSON.parse(localStorage.PSKH_USERINFO).userName,
      orgName: JSON.parse(localStorage.PSKH_USERINFO).loginPostInfo.orgName,
      postName: JSON.parse(localStorage.PSKH_USERINFO).loginPostInfo.postName,
      currentTime: [],
      checkForm: {
        id: '',
        formTitle: '出差审批表',
        formType: '1',
        accompanyList: [
          // {
          //   userName: '',
          //   userId: '',
          // },
        ],
        reimburseReason: '',
        startTime: '',
        endTime: '',
        boardingTime: '',
        startPlace: '',
        leavePlace: '',
        transportation: '',
        isUseCar: '0',
        transportationRemark: '',
        userId: localStorage.pskh_userId,
        userName: JSON.parse(localStorage.PSKH_USERINFO).userName,
        orgId: JSON.parse(localStorage.PSKH_USERINFO).loginPostInfo.orgId,
        orgName: JSON.parse(localStorage.PSKH_USERINFO).loginPostInfo.orgName,
        post: JSON.parse(localStorage.PSKH_USERINFO).loginPostInfo.postName,
        enclosureList: [],
      },
      userAOptions: [],
      saveStatus: '',
    }
  },
  created() {},
  mounted() {
    const userArr = []
    this.userAllList.forEach(item => {
      userArr.push({
        accompanyId: item.userId,
        accompanyName: item.userName,
        accompanyPost: item.post || '',
      })
    })
    this.userAOptions = userArr
    if (this.formData.id) {
      this.checkForm = JSON.parse(JSON.stringify(this.formData))
      if (this.checkForm.accompanyList.length === 0) {
        this.checkForm.accompanyList = []
      }
      if (this.checkForm.startTime) {
        this.currentTime = [this.checkForm.startTime, this.checkForm.endTime]
      }
    }
  },
  methods: {
    cancelData() {
      this.$emit('cancelData')
    },
    saveData(type) {
      if (type === '1') {
        if (!this.checkForm.reimburseReason.trim().length) {
          return this.$message.warning('请输入出差事由')
        }
        if (this.currentTime.length < 2) {
          return this.$message.warning('请选择出差时间')
        }
        // if (!this.checkForm.boardingTime) {
        //   return this.$message.warning('请选择上车时间')
        // }
        if (!this.checkForm.startPlace.trim().length) {
          return this.$message.warning('请输入出发地')
        }
        if (!this.checkForm.leavePlace.trim().length) {
          return this.$message.warning('请输入目的地')
        }
        if (!this.checkForm.transportation) {
          return this.$message.warning('请选择交通工具')
        }
        if (this.checkForm.transportation === '4' && !this.checkForm.transportationRemark.trim().length) {
          return this.$message.warning('请注明其他类型交通工具')
        }
        if (this.checkForm.enclosureList.length === 0) {
          return this.$message.warning('请上传相关附件')
        }
      }
      // this.checkForm.isUseCar = this.checkForm.transportation === '3' ? '1' : '0'
      if (this.currentTime.length) {
        this.checkForm.startTime = moment(this.currentTime[0]).format('YYYY-MM-DD HH:mm:ss')
        this.checkForm.endTime = moment(this.currentTime[1]).format('YYYY-MM-DD HH:mm:ss')
      }

      const boardingTime = this.checkForm.boardingTime
        ? moment(this.checkForm.boardingTime).format('YYYY-MM-DD HH:mm:ss')
        : ''
      const param = {
        ...this.checkForm,
        saveStatus: type,
        boardingTime,
        year: moment().format('YYYY'),
        transportationRemark: this.checkForm.transportation === '4' ? this.checkForm.transportationRemark : '',
      }
      if (type === '1') {
        this.$confirm('请确认当前出差信息是否正确，确定后不可修改。', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            this.submitForm(type, param)
          })
          .catch(() => {})
      } else {
        this.submitForm(type, param)
      }
    },
    removeHtmlStyle(html) {
      const rel = /style\s*?=\s*?([‘"])[\s\S]*?\1/g
      let newHtml = ''
      if (html) {
        newHtml = html.replace(rel, '')
      }
      return newHtml
    },
    submitForm(type, param) {
      if (this.formData.id) {
        updateTripReimburse(param).then(res => {
          if (res.code === 0) {
            if (type === '0') {
              this.$message.success('暂存成功')
            } else {
              this.$message.success('提交成功')
            }
            this.$emit('addSuccess', type)
          }
        })
      } else {
        addTripReimburse(param).then(res => {
          if (res.code === 0) {
            if (type === '0') {
              this.$message.success('暂存成功')
            } else {
              this.$message.success('提交成功')
            }
            this.$emit('addSuccess', type)
          }
        })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.expense_add {
  width: 100%;
  height: 100%;
  font-size: 14px;
  .add_con {
    flex: 1;
    padding: 0 50px;
    .add_head {
      .add_title {
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        color: #333333;
      }
      .add_info {
        font-size: 15px;
        margin: 10px;
        .title_org {
          font-weight: 600;
        }
      }
    }
    .add_table {
      .add_tab {
        margin-top: 15px;
        border-top: 1px solid #d0d7e0;
        border-left: 1px solid #d0d7e0;
        .table_line {
          display: flex;
          align-items: stretch;
          justify-content: space-around;
          color: #333333;
          .table_tit {
            padding: 15px 0;
            font-weight: 600;
            font-size: 15px;
            background-color: #e9eff48f;
          }
          .table_tit,
          .table_con {
            width: 25%;
            border-right: 1px solid #d0d7e0;
            border-bottom: 1px solid #d0d7e0;
            display: flex;
            align-items: center;
            justify-content: center;
            /deep/.el-input {
              font-size: inherit !important;
            }
            /deep/.el-textarea {
              font-size: inherit !important;
            }
            /deep/.el-range-input {
              font-size: inherit !important;
            }
          }
          .con_all {
            width: 75%;
            justify-content: start;
            /deep/.el-radio__label {
              font-size: 14px !important;
            }
          }
          .con_trans {
            flex-wrap: wrap;
            .el-radio-group {
              padding: 10px 0;
            }
            .week_input {
              width: 100%;
              border: 1px solid #d0d7e0;
              margin: 0 10px 10px;
            }
            /deep/.el-select {
              height: 100%;
              flex: 1;
              .el-input {
                height: 100%;
                .el-input__inner {
                  height: 100%;
                  text-align: center;
                }
              }
            }
          }
          .el-date-editor {
            width: 100%;
          }
          .el-radio {
            margin-left: 10px;
          }
          /deep/.el-input__inner {
            border: none;
            border-radius: 0;
            width: 100%;
          }
          /deep/.el-textarea__inner {
            border: none;
            border-radius: 0;
            width: 100%;
            font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑',
              Arial, sans-serif;
          }
        }
        .table_act {
          position: relative;
          .icon_box {
            position: absolute;
            right: -35px;
            top: 50%;
            transform: translateY(-50%);
            color: #4a79ba;
            font-size: 30px;
            display: flex;
            flex-direction: column;
            cursor: pointer;
            span {
              margin: 5px 0;
            }
          }
          .bill_head {
            .table_t1 {
              width: 20%;
              .table_t2 {
                display: flex;
                align-items: center;
                .table_tit {
                  flex: 1;
                }
              }
            }
            .t1_last {
              .table_tit {
                height: 100%;
                width: 100%;
              }
            }
          }
          .bill_con {
            display: flex;
            .bill_only {
              width: 80%;
              display: flex;
              align-items: stretch;
              .table_con {
                flex: 1;
              }
            }
            .bill_all {
              width: 20%;
              .table_con {
                width: 100%;
              }
            }
          }
        }
      }
      .add_annex {
        display: flex;
        margin-top: 20px;
        .annex_label {
          font-weight: 600;
          font-size: 16px;
          padding-top: 6px;
          span {
            color: #d9001b;
          }
        }
        .annex_upload {
          flex: 1;
          .file_tips {
            display: flex;
            align-items: center;
            margin-left: 10px;
          }
        }
      }
    }
  }
  .btn_save {
    margin-top: 20px;
    text-align: center;
  }
  .size_input {
    ::-webkit-outer-spin-button,
    ::-webkit-inner-spin-button {
      margin: 0;
      -webkit-appearance: none !important;
    }

    input[type='number']::-webkit-outer-spin-button,
    input[type='number']::-webkit-inner-spin-button {
      margin: 0;
      -webkit-appearance: none !important;
    }
  }
}
</style>
